<template>
    <el-tabs class="list-tabs__item">
        <el-tab-pane v-for="(item, index) in list" :key="index" :label="item.title">
            <el-scrollbar height="300px">
                <div class="container" @click="clickItem(item1, index1)" v-for="(item1, index1) in item.content"
                    :key="index1">
                    <div class="avatar" v-if="item1.avatar">
                        <el-avatar size="small" :src="item1.avatar" />
                    </div>
                    <div class="content">
                        <div v-if="item1.title" class="title">
                            <div>{{ item1.title }}</div>
                            <el-tag size="small" :type="item1.tagType || 'primary'" v-if="item1.tag">{{ item1.tag
                            }}</el-tag>
                        </div>
                        <div v-if="item1.desc">{{ item1.desc }}</div>
                        <div v-if="item1.time" class="time">{{ item1.time }}</div>
                    </div>
                </div>
                <div class="actions">
                    <div class="a-item" :class="{ 'border': i != actions.length }" v-for="(action, i) in actions" :key="i"
                        @click="clickAction(action, i)">
                        <div class="a-icon" v-if="action.icon">
                            <component :is="`el-icon-${toLine(action.icon)}`" />
                        </div>
                        <div class="a-text">{{ action.text }}</div>
                    </div>
                </div>
            </el-scrollbar>
        </el-tab-pane>
    </el-tabs>
</template>

<script lang='ts' setup>
import { PropType } from "vue"
import { toLine } from "../../../utils";
import { ActionOptions, ListOptions, ListItem } from "./type"
let props = defineProps({
    // 列表的内容
    list: {
        type: Array as PropType<ListOptions[]>,
        required: true
    },
    // 操作的内容
    actions: {
        type: Array as PropType<ActionOptions[]>,
        default: () => []
    }
})

let emits = defineEmits(['clickItem', 'clickAction'])

let clickItem = (item: ListItem, index: number) => {
    emits("clickItem", { item, index })
}

let clickAction = (item: ActionOptions, index: number) => {
    emits("clickAction", { item, index })
}
</script>

<style lang='scss' scoped>
.container {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    cursor: pointer;

    &:hover {
        background: #e6f6ff;
    }

    .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .avatar {
        flex: 1
    }

    .content {
        flex: 3;

        .time {
            font-size: 12px;
            color: #999;
            margin-top: 4px;
        }
    }

}

.actions {
    height: 50px;
    display: flex;
    align-items: center;
    border-top: 1px solid #eee;
    cursor: pointer;

    .a-item {
        height: 50px;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
            background: #e6f6ff;
        }


        .a-icon {
            margin-right: 4px;
            position: relative;
            top: 2px;
        }
    }
}

.border {
    border-right: 1px solid #eee;
}
</style>